<!-- 标书获取页面 -->
<template>
    <div class="app-container">
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="iNumber" label="项目编号">
            </el-table-column>
            <el-table-column prop="iName" label="项目名称">
            </el-table-column>
            <el-table-column prop="getEndTime" label="标书获取截止时间">
            </el-table-column>
        </el-table>

        <div style="margin-top: 10px;"></div>
        <!-- <p style="color: aqua;"><i class="el-icon-notebook-2"></i> &nbsp; 获取详细信息</p>   -->
        <el-row :gutter="10" class="mb8">
            <right-toolbar @queryTable="getOperator(queryParams.sid)"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="operatorList">
            <el-table-column label="序号" type="index" align="center" width="50">
            </el-table-column>
            <el-table-column label="获取标书单位名称" align="center" prop="name">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系人" align="center" prop="person">
                <template slot-scope="scope">
                    <span>{{ scope.row.person }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系方式" align="center" prop="phone">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="邮箱" align="center" prop="email">
                <template slot-scope="scope">
                    <span>{{ scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column label="下载时间" align="center" prop="downloadTime">
                <template slot-scope="scope">
                    <span>{{ scope.row.downLoadTime }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 供应商获取标书,只有供应商才能获得 -->
        <div class="fixed-button-container" v-show="this.$route.query.status != 7">
            <el-button type="primary" @click="getBidDocument" style="width: 100%;">获取标书</el-button>
        </div>
    </div>
</template>

<script>
import { bidGetDocumentPeople, getBidDocument, getPersonInfo } from '@/api/system/purchase'

export default {
    data() {
        return {
            iNumber: '',
            tableData: [],
            loading: true,
            operatorList: [],
            activeName: 'info',
            formData: {},
        }
    },
    methods: {
        getFirstPageInfo(InUMBER) {
            bidGetDocumentPeople(InUMBER).then(res => {
                this.loading = false;
                //为了给投标中判断时间是否合理
                if (res.data.tender != null) {
                    res.data.tender.iNumber = this.iNumber;
                    this.$route.query.kaiStartTime = res.data.tender.kaiStartTime;
                    this.$route.query.kaiEndTime = res.data.tender.kaiEndTime;
                    if (this.tableData.length > 0) {
                        this.tableData = [];
                    }
                    //只有招标商才能在这个页面看所有的获标人
                    if (this.$store.getters.roles[0] != "admin") {
                        res.data.tenderPeople = res.data.tenderPeople.filter(item => {
                            return item.name === this.formData.hName
                        })
                    }
                    this.operatorList = res.data.tenderPeople;
                    this.tableData.push(res.data.tender);
                }
            })
        },
        getBidDocument() {
            if (this.tableData.length == 0) {
                this.$message.error("当前时间不在获取标书期限内!");
                return false;
            }
            const startDateTime = new Date(this.tableData[0].getStartTime);
            const endDateTime = new Date(this.tableData[0].getEndTime);
            const now = new Date();

            // 判断当前时间是否在 startDateTime 和 endDateTime 之间
            if (now < startDateTime || now > endDateTime) {
                this.$message.error("当前时间不在获取标书期限内22!");
                return false;
            }
            getBidDocument(this.iNumber).then(res => {
                if (res.data == null) {
                    this.$message({
                        type: 'warning',
                        message: '当前时间不在获取标书期限内'
                    });
                    return;
                }
                //填写完基本信息
                if (res.data[0].name === "补充") {
                    this.$message({
                        type: 'warning',
                        message: '请补充完基本信息'
                    });
                    return;
                }
                //填写完基本信息
                if (res.data[0].name === "已获得") {
                    this.$message({
                        type: 'warning',
                        message: '您已获得过标书!不可重复获得'
                    });
                    return;
                }

                if (res.data[0].name === "没有资格") {
                    this.$message({
                        type: 'waring',
                        message: '您不在邀请范围内'
                    });
                    return;
                }
                
                this.$message({
                    type: 'success',
                    message: '您已成功获得标书'
                });
                this.downloadFilesWithDelay(res.data, 0); // 从索引 0 开始下载
                this.getFirstPageInfo(this.iNumber)
            });
        },
        downloadFilesWithDelay(files, index) {
            if (index < files.length) {
                this.downloadFile(files[index]);
                // 设置延迟，例如 100 毫秒
                setTimeout(() => {
                    this.downloadFilesWithDelay(files, index + 1); // 递归调用以处理下一个文件
                }, 100);
            }
        },
        downloadFile(ele) {
            fetch(ele.url)
                .then(response => response.blob())
                .then(blob => {
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = ele.name; // 指定下载的文件名
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url);
                })
                .catch(error => {
                    console.error('Error downloading file:', error);
                });
        },
        //获得供应商信息
        getSupplierInfo() {
            getPersonInfo().then(res => {
                if (res.data != null) {
                    this.formData.hName = res.data.hName;
                }
                this.getFirstPageInfo(this.iNumber);
            })
        },
    },
    mounted() {
        // this.getFirstPageInfo(this.$route.query.iNumber);
        this.iNumber = this.$route.query.iNumber;
        this.getSupplierInfo();
    },

}
</script>
<style scoped>
.fixed-button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
    /* 确保按钮在其他内容之上 */
    background-color: white;
    /* 可选：添加背景色以防止内容遮挡 */
    padding: 10px 0;
    /* 可选：添加内边距以增加按钮与边界的距离 */
}
</style>